import React, { useContext, useState } from 'react'
import { Table, Button, Modal, Form, Checkbox, TreeSelect, Input, Tooltip } from 'antd'
import IconSvg from '@/components/IconSvg'
import { messageSettingsContext } from '../../context'
import CKEditor from '@/components/CKEditor'
import style from './style.module.less'

export default () => {
  const { SHOW_PARENT } = TreeSelect
  const { messagePushConfig } = useContext(messageSettingsContext)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const treeData = messagePushConfig.three // 重洗之后的接收人数据结构
  const [content, setContent] = useState('')

  const tProps = {
    treeData,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    style: {
      width: '320px',
      marginLeft: 14,
    },
  }

  const [form] = Form.useForm()

  const showModal = (record: any) => {
    console.log('🦢🦢showModalshowModalshowModal', record)
    setContent(record.content)
    setIsModalOpen(true)

    form.setFieldsValue({ ...record, recipient: record.receiveList })
  }

  const handleOk = () => {
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const columns: any = [
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: 320,
      align: 'center',
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
      width: 628,
      align: 'center',
      // render: (value: string) => <div dangerouslySetInnerHTML={{ __html: value }} />,
      render: (value: string) => (
        <div className={style.hiddenWrappr}>
          <Tooltip
            overlayStyle={{ maxWidth: 'none', maxHeight: 'none', width: 628 }}
            title={<span dangerouslySetInnerHTML={{ __html: value }} />}
            mouseEnterDelay={0.5}
          >
            {/* {value} */}
            <span dangerouslySetInnerHTML={{ __html: value }} />
          </Tooltip>
        </div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 220,
      align: 'center',
      render: (text: any, record: any) => (
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
          <Button
            type='link'
            onClick={() => {
              showModal(record)
            }}
          >
            <IconSvg name='cityExamine' style={{ marginRight: 5 }} />
            查看
          </Button>
        </div>
      ),
    },
  ]
  return (
    <div className={style.messagePush}>
      <div>
        <Table
          rowKey='id'
          pagination={{
            position: ['bottomRight'],
            total: messagePushConfig.pageParams.totalCount,
            onChange: (page: number, pageSize: number | undefined) => {
              if (pageSize && pageSize !== messagePushConfig.pageParams.pageSize) {
                messagePushConfig.handleChangePage(1, pageSize || messagePushConfig.pageParams.pageSize)
                return
              }
              messagePushConfig.handleChangePage(page, pageSize || messagePushConfig.pageParams.pageSize)
            },
            current: messagePushConfig.pageParams.pageIndex,
            pageSize: messagePushConfig.pageParams.pageSize,
            showSizeChanger: true,
            showTotal: (total: number) =>
              `共 ${total} 条记录  第 ${messagePushConfig.pageParams.pageIndex} / ${Math.ceil(
                total / messagePushConfig.pageParams.pageSize,
              )}页`,
          }}
          dataSource={messagePushConfig.historyPushTableData}
          columns={columns}
          scroll={{ x: 'max-content', y: 'calc(100vh - 310px)' }}
        />
      </div>

      {/* 查看弹框 */}
      <Modal width={1000} footer={null} title='查看' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form form={form}>
          <Form.Item label='推送方式' name='type' labelAlign='left'>
            <Checkbox.Group onChange={messagePushConfig.getPushMethod} style={{ width: 320 }}>
              <Checkbox value='1'>邮件</Checkbox>
              <Checkbox value='3'>短信</Checkbox>
            </Checkbox.Group>
          </Form.Item>

          <Form.Item label='推送标题' name='title' labelAlign='left'>
            <Input onChange={messagePushConfig.getPushTitle} style={{ width: 320 }} />
          </Form.Item>

          <Form.Item label='接收人' name='recipient' labelAlign='left'>
            <TreeSelect {...tProps} />
          </Form.Item>

          <Form.Item label='推送内容' labelAlign='left'></Form.Item>
          <div className={style.eduit}>
            <div className={style.center}>
              <div className={style.centerEditor}>
                <CKEditor value={content} />
              </div>
            </div>
          </div>
        </Form>
      </Modal>
    </div>
  )
}
